import { useEffect, useState } from 'react';
import { Button, Space, Form, Row, Col, Input, Table, Select, Popover } from 'antd';
import { PAGINATION_CONFIG } from '@/constants';
import type { QueryBigNormalChargeListParams, BigNormalCharge } from './services';
import { BigNormalChargeType, queryChargeList } from './services'
import { useRequest } from 'ahooks';
import type { ColumnsType } from 'antd/es/table/interface';
import dayjs from 'dayjs';
import { enum2options } from '@/utils/enum2options';
import Ellipsis from '@/components/Ellipsis';

const BigNormalChargePage: React.FC<RoutePageProps> = (props) => {
  const [searchForm] = Form.useForm<QueryBigNormalChargeListParams>()
  const [searchParams, setSearchParams] = useState<QueryBigNormalChargeListParams>({
    pageNum: 1, pageSize: 10,
  })
  const list = useRequest(() => queryChargeList(searchParams), {
    refreshDeps: [searchParams],
  })

  const onFinish = (formValues: any) => {
    setSearchParams({
      ...searchParams,
      ...formValues,
      pageNum: 1,
    })
  }

  const columns: ColumnsType<BigNormalCharge> = [
    {
      title: '流水号',
      dataIndex: 'orderId',
      width: 120,
    },
    {
      title: '交易类型',
      dataIndex: 'infoType',
      width: 130,
      render: val => BigNormalChargeType[val],
    },
    {
      title: '交易金额(元)',
      dataIndex: 'amount',
      width: 130,
    },
    {
      title: '用户信息',
      dataIndex: 'nickname',
      width: 160,
      render: (val, record) => {
        if (val && record.telephone) return <div>
          <div>昵称: {val}</div>
          <div>手机号: {record.telephone}</div>
        </div>
        if (val) return <div>昵称: {val}</div>
        if (record.telephone) return <div>手机号: {record.telephone}</div>
        return '--'
      }
    },
    {
      title: '操作人',
      dataIndex: 'username',
      width: 120,
      render: val => val || '企业管理员'
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      width: 160,
      render: val => val && dayjs(val).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '备注',
      dataIndex: 'commend',
      width: 120,
      render: val => val ? <Popover content={val}><Ellipsis>{val}</Ellipsis></Popover> : '--'
    },
  ]

  useEffect(() => {
    if (props.params.loginPhone) {
      searchForm.setFieldsValue({
        loginPhone: props.params.loginPhone
      })
      searchForm.submit()
    }
  }, [props.params.loginPhone])
  
  return (
    <div className='container'>
      <div className="card search-card">
        <div className="form-area">
          <Form name='searchBigNormalChargeForm' form={searchForm} onFinish={onFinish}>
            <Row gutter={[20, 20]}>
              <Col span={6}>
                <Form.Item label='用户手机号' name='loginPhone'>
                  <Input placeholder='请输入' />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label='交易类型' name='infoType'>
                  <Select placeholder='请选择' options={enum2options(BigNormalChargeType)} allowClear style={{width: '100%'}} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Space>
                  <Button type='primary' htmlType='submit' loading={list.loading}>筛选</Button>
                  <Button htmlType='reset'>重置</Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      <div className="card content-card">
        <Table<BigNormalCharge>
          rowKey='orderId'
          loading={list.loading}
          dataSource={list.data?.data}
          columns={columns}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: list.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </div>
    </div>
  );
};

export default BigNormalChargePage;
